<template>
	<view>
		<view class="grid-box">
			<view class="head-title u-m-b-10"><text>回收品信息</text></view>
			<goods-list :details="orderForm.details"></goods-list>
			<view class="total">
				<text>实际总回收金额:</text>
				<text class="total-price">
					￥{{orderForm.amount==0?'--':orderForm.amount.toFixed(2)}}
					<!-- <text class="decimal">00</text> -->
				</text>
			</view>
		</view>
		<view class="grid-box" v-if="orderForm.user">
			<view class="head-title u-m-b-10"><text>联系人信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">联系人：</text>
					<view class="text">{{orderForm.user.name}}</view>
				</view>
				<view class="item">
					<text class="label">电话：</text>
					<view class="text">{{orderForm.user.mobile}}</view>
				</view>
			</view>
		</view>
		<view class="grid-box" v-if="orderForm.enterprise">
			<view class="head-title u-m-b-10"><text>客户组信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">客户组名称：</text>
					<view class="text">{{orderForm.enterprise.name}}</view>
				</view>
				<view class="item" v-if="orderForm.enterprise.department">
					<text class="label">所属部门：</text>
					<view class="text">{{orderForm.enterprise.department}}</view>
				</view>
				<view class="item">
					<text class="label">所属地区：</text>
					<view class="text">{{orderForm.enterprise.cityname}}</view>
				</view>
			</view>
		</view>
		<view class="grid-box" v-if="orderForm.store">
			<view class="head-title u-m-b-10"><text>站点信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">站点名称：</text>
					<view class="text">{{orderForm.store.name}}</view>
				</view>
				<view class="item">
					<text class="label">所属地区：</text>
					<view class="text">{{orderForm.store.citynames}}</view>
				</view>
				<view class="item">
					<text class="label">详细地址：</text>
					<view class="text">{{orderForm.store.address}}</view>
				</view>
			</view>
		</view>
		<view class="grid-box">
			<view class="head-title u-m-b-10"><text>订单信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">订单编号：</text>
					<view class="text">{{orderForm.number}}</view>
				</view>
				<view class="item">
					<text class="label">完成时间：</text>
					<view class="text">{{$u.timeFormat(orderForm.createddatetime.replaceAll('-','/'), 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
			</view>
		</view>
		<view class="navigation-box">
			<view class="navigation">
				<view class="right">
					<u-button class="navbtn u-flex-1" @click="goBack">返回</u-button>
				</view>
			</view>
			<view class="sp"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				type: 1, //1线下，2线上
				orderForm: {
					store: {},
					details: [],
					createddatetime: '',
					user: {},
					amount: 0
				}
			}
		},
		onLoad(opt) {
			this.type = opt.type
			this.id = opt.id
			this.orderView(this.id)
		},
		methods: {
			// 订单详情
			orderView(id){
				let api
				if(this.type == 1){
					api = '/User/Order/FITDetail?id='+id
				}else{
					api = '/User/Order/Detail?id='+id
				}
				return this.$u.get(api).then((res)=>{
					let data = res
					data.details.forEach((item)=>{
						item.icon = this.fileURL + item.icon
					})
					this.orderForm = data
				})
			},
			// 返回首页
			goBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	// 宫格展示
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 24rpx;
		margin-top: 30rpx;
		box-shadow: $u-color-border-shadow;
		.head-title{
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			.more{
				color: $u-tips-color;
			}
		}
		.tips-txt{
			color: $u-tips-color;
			font-size: 24rpx;
		}
		.content{
			display: flex;
			.title{
				font-weight: bold;
				font-size: 28rpx;
			}
		}
		.total{
			text-align: right;
			border-top: 1px solid #f2f2f2;
			padding: 20rpx 0 0;
		}
		.text-orange{
			color: $u-color-orange
		}
	}
	// 订单
	.order {
		// width: 690rpx;
		// background-color: #ffffff;
		// margin: 30rpx auto;
		// border-radius: 30rpx;
		// box-sizing: border-box;
		// padding: 30rpx;
		// font-size: 28rpx;
		// box-shadow: $u-color-border-shadow;
		.top {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-warning-dark;
			}
		}
		.item {
			display: flex;
			margin: 20rpx 0 0;
			justify-content: space-between;
			.left {
				margin-right: 20rpx;
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
				.delivery-time {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;
			.total-price {
				font-size: 32rpx;
				color: $u-color-orange;
			}
		}
		.time{
			font-size: 24rpx;
			margin: 20rpx 0;
			line-height: 40rpx;
		}
		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;
			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
				padding: 0 10rpx;
			}
			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}
	// 按钮栏
	.navigation {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 99999;
		// background-color: white;
		display: flex;
		margin-top: 20rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		
		// padding: 16rpx 0;
		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			flex: 1;
			justify-content: space-around;
			padding-left: 10rpx;
			padding-right: 10rpx;
			padding-top: 20rpx;
			padding-bottom: env(safe-area-inset-bottom);
			.navbtn{
				margin: 0 10rpx;
			}
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
				margin: 16rpx 0;
			}
			.cancel {
				margin-right: 30rpx;
				color: $u-tips-color;
			}
			.buy {
				background-color: #ff7900;
			}
		}
	}
	
	.sp{
		// height: calc(185rpx + env(safe-area-inset-bottom));
		height: 205rpx;
		width: 750rpx;
	}
	
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	
	//
	.u-table-box{
		margin: 20rpx 0;
		.green{
			background-color: $u-color-green;
			color: #fff!important;
		}
		.red{
			background-color: $u-color-red;
			color: #fff!important;
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
			color: $u-color-orange;
		}
	}
</style>
